<template>
  <div class="rightbox" v-cloak>
    <h1>公司中心 > 新增设计师</h1>
    <div class="add-box" style="width:650px;">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item
          prop="headimg"
          label="上传头像(必填)"
          v-if="state == 0">
          <input type="file" ref="headimg" style="width:350px;float:left;">
          <span>尺寸(150*150)</span>
          <!-- <el-input type="file" class="headimg" v-model="form.headimg" style="width:350px;float:left;"></el-input> -->
        </el-form-item>
        <el-form-item
          prop="headimg"
          label="上传头像"
          v-if="state == 1">
          <input type="file" ref="headimg" style="width:350px;float:left;">
          <span>尺寸(150*150)</span>
          <!-- <el-input type="file" class="headimg" v-model="form.headimg" style="width:350px;float:left;"></el-input> -->
        </el-form-item>
        <el-form-item
          prop="name"
          label="姓名"
          :rules="[
            { required: true, message: '请填写姓名', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          prop="age"
          label="年龄"
          :rules="[
            { required: true, message: '请填写年龄', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item
          prop="experience"
          label="设计经验"
          :rules="[
            { required: true, message: '请填写设计经验', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.experience"></el-input>
        </el-form-item>
        <el-form-item
          prop="begood"
          label="擅长"
          :rules="[
            { required: true, message: '请选择擅长方面', trigger: 'blur' }
          ]"
        >
          <el-select v-model="form.begood" multiple placeholder="请选择" style="width:540px">
            <el-option
              v-for="item in form.goodData"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="detail"
          label="简介"
          :rules="[
            { required: true, message: '请填写简介', trigger: 'blur' }
          ]"
        >
          <el-input type="textarea" v-model="form.detail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="state == 0" type="primary" @click="submit('form')">提交</el-button>
          <el-button v-if="state == 1" type="primary" @click="submit2('form')">修改提交</el-button>
          <el-button  @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        headimg: '',
        name: '',
        age: '',
        experience: '',
        begood: [],
        goodData: [],
        detail: ''
      },
      designerIndex: '',
      state: ''
    }
  },
  methods: {
    getData () {
      var that = this
      that.$axios.request('post', '/Config/Get', {
        ParamIndex: 2
      })
        .then((res) => {
          if (res.code === 0) {
            that.form.goodData = res.data.items
          }
        })
    },
    getParams () {
      var that = this
      that.designerIndex = that.$route.params.designerIndex
      if (that.designerIndex) {
        that.state = 1
        that.$axios.request('post', '/CompanyDesigner/Detail', {
          designerIndex: that.designerIndex
        })
          .then((res) => {
            if (res.code === 0) {
              that.form.age = res.data.age
              that.form.name = res.data.name
              that.form.experience = res.data.experience
              that.form.detail = res.data.describe
              for (var i = 0; i < res.data.strong.length; i++) {
                that.form.begood.push(res.data.strong[i].key)
              }
            }
          })
      } else {
        that.state = 0
      }
    },
    submit: function (form) {
      var that = this
      var formFile = new FormData()
      that.$refs[form].validate((valid) => {
        if (valid) {
          var strong = that.form.begood.join(',')
          var headimg = that.$refs.headimg.files[0]
          formFile.append('headImage', headimg)
          formFile.append('Name', that.form.name)
          formFile.append('Age', that.form.age)
          formFile.append('Experience', that.form.experience)
          formFile.append('Strong', strong)
          formFile.append('Describe', that.form.detail)
          that.$axios.request2('post', '/CompanyDesigner/AddPost', formFile)
            .then((res) => {
              if (res.code === 0) {
                that.$axios.alert('新增成功', '提示', function () {
                  that.resetForm()
                })
              }
            })
        } else {
          return false
        }
      })
    },
    submit2: function (form) {
      var that = this
      var formFile = new FormData()
      that.$refs[form].validate((valid) => {
        if (valid) {
          var strong = that.form.begood.join(',')
          console.log(strong)
          var headimg = that.$refs.headimg.files[0]
          formFile.append('DesignerIndex', that.designerIndex)
          formFile.append('headImage', headimg)
          formFile.append('Name', that.form.name)
          formFile.append('Age', that.form.age)
          formFile.append('Experience', that.form.experience)
          formFile.append('Strong', strong)
          formFile.append('Describe', that.form.detail)
          that.$axios.request2('post', '/CompanyDesigner/UpdatePost', formFile)
            .then((res) => {
              if (res.code === 0) {
                that.$axios.alert('修改成功', '提示', function () {
                  that.$router.push({ name: 'desigList' })
                })
              }
            })
        } else {
          return false
        }
      })
    },
    resetForm: function (form) {
      var that = this
      that.form.name = ''
      that.form.age = ''
      that.form.experience = ''
      that.form.begood = []
      that.form.goodData = []
      that.form.detail = ''
    }
  },
  mounted () {
    this.getData()
    this.getParams()
  }
}
</script>
